<template>
	<view class="container">
		<view class="content"><!-- 第1层 拉伸封面图 -->
			<image :src="collageInfo.imagePath" mode=""></image>
			<view class="maskBox"><!-- 第2层 遮罩层 -->
				<view class="buttonGroup"><!-- 第3层 打开app按钮 直播间名称 观看人 次 -->
					<view class="topInfo">
						<view class="shopAvatar" v-if="collageInfo">
							<image v-if="collageInfo&&collageInfo.shopVo&&collageInfo.shopVo.headPortrait"
								:src="collageInfo.shopVo.headPortrait" mode=""></image>
						</view>
						<view class="shopNameBox">
							<view class="shopName" v-if="collageInfo&&collageInfo.shopVo&&collageInfo.shopVo.name">
								{{collageInfo.shopVo.name}}</view>
							<view class="shopLookNumber"></view>
						</view>
					</view>
					<view class="goApp" v-if="!weixinFlag">
						<view class="goAppText">开播啦!</view>
						<view class="goAppButton" @click="goApp">
							打开App观看直播
						</view>
					</view>
					<wx-open-launch-app id="launch-btn" appid="wx14141f5e44bcc4be" :extinfo="extinfo" class="launchbtn"
						style="position: absolute;top: 311px;left: 50%;transform: translate(-50%, -50%);width: 275px;">
						<script type="text/wxtag-template">
							<view class="goApp" style="display:block;">
								<view class="goAppText" style="text-align: center;color: #fff;margin-bottom: 32px;display:block;">开播啦!</view>
								<view class="goAppButton" style="margin: 0 auto;width: 275px;text-align: center;font-size: 16px;color: #212121;line-height: 44px;background: #BEFD00;border-radius: 22px;font-weight: 600;display:block;" >
									打开App观看直播
								</view>
							</view>
						  </script>
					</wx-open-launch-app>
				</view>
			</view>
		</view>
		<!-- <u-overlay :show="show" opacity='0.7'>
			<view class="overlayBox">
				<image src="../../static/webMobile/shodow.png" mode=""></image>
			</view>
		</u-overlay> -->
	</view>
</template>

<script>
	import {
		getCardCollageInfo,
		dict,
		dictType,
	} from '@/api/collage.js'
	import openInWechat from '@/mixins/openInWechat.js'
	export default {
		mixins: [openInWechat],
		data() {
			return {
				collageId: '',
				userId: '',
				collageInfo: {},
				swiperList: [],
				sumTime: undefined,
				day: undefined,
				hour: undefined,
				minutes: undefined,
				second: undefined,
				dictData: [],
				swiperData: [],
				timer: undefined,
				show: false,
				ua: "",
				osName: "",
				detailImage: [],
				show: false,
			}
		},
		onLoad() {
			this.getSystemInfo()
			this.getCardCollageInfo()

		},
		methods: {
			// getSystemInfo() {
			// 	uni.getSystemInfo({
			// 		success: (res) => {
			// 			// console.log(res)
			// 			this.ua = res.ua
			// 			this.osName = res.osName
			// 			// alert(res.osName)
			// 			// alert(res.ua)
			// 		}
			// 	})
			// },
			watchVisibility() {
				window.addEventListener('visibilitychange', () => {
					// 监听页面visibility
					if (document.hidden) {
						// 如果页面隐藏了，则表示唤起成功，这时候需要清除下载定时器
						clearTimeout(this.timer)
					}
				})
			},
			getParam(path, name) {
				var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");
				if (reg.test(path)) {
					return unescape(RegExp.$2.replace(/\+/g, " "));
				} else {
					return "";
				}
			},
			async getCardCollageInfo() {
				let url = window.location.href
				// console.log(this.getParam(url, 'id'))
				this.collageId = this.getParam(url, 'id')
				this.extinfo = `http://www.cardplayd.com/apple-app-site-association/collage/live/room/${this.collageId}`
				// this.userId = this.getParam(url, 'userId')
				// console.log(this.userId)
				// this.collageId="1649297548326793217"
				let {
					code,
					data,
					msg
				} = await getCardCollageInfo(this.collageId)
				// console.log(res)
				if (code == 200) {
					this.collageInfo = data
					this.swiperList = this.collageInfo.rotationImagePath.split(',')
					this.detailImage = this.collageInfo.detailedImagePath.split(',')
					uni.setNavigationBarTitle({
						title: data.collageName
					});
					this.extinfo = `http://www.cardplayd.com/apple-app-site-association/collage/live/room/${this.collageId}`
					// this.colrdo()
					// let timeRep = (this.collageInfo.endTimeStamp - this.collageInfo.nowTimeStamp) / 1000
					// this.sumTime = setInterval(() => {
					// 	timeRep -= 1
					// 	this.getTime(timeRep)
					// }, 1000)
				}
			},
			goApp() {
				// alert(this.ua)
				if (this.ua.indexOf('Weixin') !== -1 || this.ua.indexOf('WeChat') !== -1) {
					this.show = true
					return false
				}
				this.watchVisibility()
				this.timer = setTimeout(() => {
					uni.reLaunch({
						url: '/pages/webMobile/webMobile'
					})
				}, 5000)
				if (this.osName == "ios") { //ios系统的处理
					window.location.href =
						`http://www.cardplayd.com/apple-app-site-association/collage/live/room/${this.collageId}`
				} else if (this.osName == "android") { //Android系统的处理
					window.location.href =
						`http://www.cardplayd.com/apple-app-site-association/collage/live/room/${this.collageId}`
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		view {
			box-sizing: border-box;
		}

		.content {
			width: 750rpx;
			height: 100vh;
			position: relative;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}

			.maskBox {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				background: rgba(31, 31, 31, 0.6);
				backdrop-filter: blur(40rpx)
			}

			.buttonGroup {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;

				.topInfo {
					min-width: 252rpx;
					display: flex;
					align-items: center;
					padding: 4rpx;
					padding-right: 20rpx;
					border-radius: 100rpx;
					background: rgba(31, 31, 31, 0.5);
					position: absolute;
					top: 96rpx;
					left: 40rpx;

					.shopAvatar {
						border-radius: 50%;
						width: 64rpx;
						height: 64rpx;
						overflow: hidden;
						margin-right: 8rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.shopNameBox {
						color: #fff;

						.shopName {
							// padding-top: 6rpx;
							font-size: 24rpx;
							// margin-bottom: 8rpx;
						}

						.shopLookNumber {
							font-size: 20rpx;
						}
					}
				}

				.goApp {
					position: absolute;
					top: 622rpx;
					left: 50%;
					transform: translate(-50%, -50%);

					.goAppText {
						text-align: center;
						color: #fff;
						margin-bottom: 64rpx;
					}

					.goAppButton {
						margin: 0 auto;
						width: 550rpx;
						text-align: center;
						font-size: 32rpx;
						color: #212121;
						line-height: 88rpx;
						background: #BEFD00;
						border-radius: 44rpx;
						font-weight: 600;
					}
				}
			}
		}
	}

	.overlayBox {
		text-align: right;
		padding: 48rpx;

		image {
			width: 494rpx;
			height: 302rpx;
		}
	}
</style>